<!DOCTYPE html><!--全部商品列表-->
<html lang="en" class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/amazingHeader2::amazing_header('商品列表')">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <button type="button" class="layui-btn layui-btn-danger" onclick="delAll()"><i
                                class="layui-icon"></i>批量删除
                        </button>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="proName" placeholder="请输入商品名" autocomplete="off"
                                   class="layui-input" id="selName">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" type="button" lay-filter="sreach"><i
                                    class="layui-icon" onclick="search()">&#xe615;</i></button>
                        </div>
                        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
                           onclick="location.reload()" title="刷新">
                            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
                        </a>
                    </form>
                    <hr>
                    <blockquote class="layui-elem-quote">
                        商品类别：<span id="cname"></span>
                    </blockquote>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-table layui-form">
                        <thead>
                        <tr>
                            <th>
                                <input type="checkbox" lay-filter="checkall" name="" lay-skin="primary">
                            </th>
                            <th>ID</th>
                            <th>名称</th>
                            <th>详情</th>
                            <th>图片</th>
                            <th>价格</th>
                            <th>库存</th>
                            <th>状态</th>
                            <th>创建事件</th>
                            <th>修改时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="tbody">

                        </tbody>
                    </table>
                </div>
                <div class="layui-card-body " style="text-align: center">
                    <div class="page">
                        <div id="page">

                        </div>
                    </div>
                    <div style="margin-top: 5px">
                        共有<span id="total"></span>条数据，每页显示
                        <label for="pageSize">
                            <select id="pageSize" class="layui-select" onchange="page(1)">
                                <option selected="selected">4</option>
                                <option>5</option>
                                <option>6</option>
                            </select>
                        </label>
                        条
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    function page(nowPage) {
        //填充表格
        $.ajax({
            type: "GET",
            url: "pro/search",
            data: {
                size: $("#pageSize").val(),
                num: nowPage,
                name: $("#selName").val()
            },
            beforeSend: function () {
                loading = layer.msg('处理中', {icon: 16});
            },
            success: function (result) {
                layer.close(loading);
                let total = $("#total");
                total.text(result.data.total);
                const body = $("#tbody");
                body.empty();//添加前先清空原有表格  防止套娃！！！
                const arr = result.data.list;
                for (let i = 0; i < arr.length; i++) {
                    const tr = $("<tr style='height: 5%'></tr>");
                    tr.append("<td><input type='checkbox' name='id' value='"+ arr[i].id +"' lay-skin='primary'></td>");
                    tr.append("<td>" + arr[i].id + "</td>");
                    tr.append("<td>" + arr[i].name + "</td>");
                    tr.append("<td>" + arr[i].detail + "</td>");
                    tr.append("<td><img src=" + 'image/' + arr[i].mainImage + " alt=" + arr[i].name + "></td>");
                    tr.append("<td>" + arr[i].price + "</td>");
                    tr.append("<td>" + arr[i].stock + "</td>");
                    if (arr[i].status === 1) {
                        tr.append("<td class='td-status'><span class='layui-btn layui-btn-normal layui-btn-mini'>在售</span></td>");
                    } else {
                        tr.append("<td class='td-status'><span class='layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled'>下架</span></td>")
                    }

                    tr.append("<td>" + arr[i].createTime + "</td>");
                    tr.append("<td>" + arr[i].updateTime + "</td>");
                    tr.append("<td class='td-manage'>" +
                        "<a onclick=\"member_stop(this," + arr[i].id + ")\"  title=\"在售\">\n" +
                        "<i class=\"layui-icon\">&#xe601;</i>\n" +
                        "</a>\n" +
                        "<a title=\"编辑\" onclick=\"xadmin.open('编辑','changePro?id="+ arr[i].id +"')\">\n" +
                        "<i class=\"layui-icon\">&#xe642;</i>\n" +
                        "</a>\n" +
                        "<a title=\"删除\" onclick=\"member_del(this,"+ arr[i].id +")\" href=\"javascript:;\">\n" +
                        "<i class=\"layui-icon\">&#xe640;</i>\n" +
                        "</a>" +
                        "</td>");
                    body.append(tr);
                }
                //添加 分页条
                const page = $("#page");
                const allPage = result.data.navigateLastPage;//总页数
                page.empty();

                if (nowPage <= 1) {//如果减后 nowPage值不合法 将链接设为红色 且去掉点击事件
                    page.append("<a class='prev' style='color: red'>&lt;&lt;</a>");
                } else {
                    page.append("<a class='prev' onclick=page(" + (nowPage - 1) + ")>&lt;&lt;</a>");
                }
                for (let i = 1; i <= allPage; i++) {
                    if (i === nowPage) {
                        page.append(" <span class='current'>" + i + "</span>");
                    } else {
                        page.append("<a class='num' onclick='page(" + i + ")'>" + i + "</a>");
                    }
                }
                if (nowPage === allPage) {//如果nowPage已经等于最大值  将连接设为红色 且去掉点击事件
                    page.append("<a style='color: red' class='prev' id='a' >&gt;&gt;</a>");
                } else {
                    page.append("<a class='prev' id='a' onclick=page(" + (nowPage + 1) + ")>&gt;&gt;</a>");
                }
                form = layui.form;
                form.render();
            }
        });
    }

    page(1);

    /*
    模糊查找商品
     */
    function search() {
        page(1);
    }
</script>
<script>
    layui.use(['laydate', 'form'], function () {
        var laydate = layui.laydate;
        var form = layui.form;


        // 监听全选
        form.on('checkbox(checkall)', function (data) {

            if (data.elem.checked) {
                $('tbody input').prop('checked', true);
            } else {
                $('tbody input').prop('checked', false);
            }
            form.render('checkbox');
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });


    });

    /*商品-停用*/
    function member_stop(obj, id) {
        layer.confirm('确认要改变吗？', function (index) {
            if ($(obj).attr('title') !== '在售') {
                $(obj).attr('title', '在售');
                $(obj).find('i').html('&#xe601;');
                changeStatus(id);
                $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('在售');
                layer.msg('已启用!', {icon: 6, time: 1000});
            } else {
                $(obj).attr('title', '下架');
                $(obj).find('i').html('&#xe62f;');
                changeStatus(id);
                $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('下架');
                layer.msg('已下架!', {icon: 5, time: 1000});
            }
        });
    }

    function changeStatus(id) {
        $.ajax({
            type: "PUT",
            data: {
                'id': JSON.stringify(id)
            },
            contentType: "application/json",
            url: 'pro/chStatus',
            beforeSend: function () {
                loading = layer.msg('处理中', {icon: 16})
            },
            success: function (result) {
                layer.close(loading);
            }
        })
    }

    /*用户-删除*/
    function member_del(obj, id) {
        const arr = [];
        // if (Array.isArray(id)) {
        //     // for (let i in id) {
        //     //     arr.push(id[i]);
        //     // }
        //     for (let i = 0; i < id.length; i++) {
        //         arr.push(id[i]);
        //     }
        // } else {
        //     arr.push(id);
        // }
        arr.push(id);
        layer.confirm('确认要删除吗？', function (index) {
            //发异步删除数据
            del(arr);
            page(1);
            layer.msg('已删除!', {icon: 1, time: 1000});
        });
    }

    /**
     * 给一个数组 格式化为json格式后给后台
     * @param arr
     */
    function del(arr) {
        $.ajax({
            type: "DELETE",
            url: "/pro/delPro",
            data: JSON.stringify(arr),
            contentType: 'application/json',
            dataType: "json",
            beforeSend: function () {
                loading = layer.msg('处理中', {icon: 16});
            },
            success: function (result) {
                layer.close(loading);
                if(result.status===0){
                    layer.msg(result.msg,{time:1500,icon:5,shift:6});
                }
            }
        });
    }

    /*删除选中的所有数据*/
    function delAll(argument) {
        const ids = [];

        // 获取选中的id
        $('tbody input').each(function (index, el) {
            if ($(this).prop('checked')) {
                ids.push($(this).val())
            }
        });

        layer.confirm('确认要删除吗？' + ids.toString(), function (index) {
            //捉到所有被选中的，发异步进行删除
            del(ids);
            member_del(null, ids);
            layer.msg('删除成功', {icon: 1});
            page(1);
        });
    }
</script>
</html>